<!--
 * @Descripttion: 课堂分析详情-其他内容-教学优缺点
 * @version: V1.0.0.1
 * @Author: zhaozhenzhuo
 * @Date: 2025-10-30 15:50:05
 * @LastEditors: zhaozhenzhuo
 * @LastEditTime: 2025-10-30 15:50:05
-->
<template>
	<div class="teaching-pros-and-cons-wrapper">
		<div class="module-title-wrapper">
			<p>教学优缺点</p>
			<img v-if="false" src="@/assets/images/lessonAnalysisDetails/text-edit-normal.png" />
		</div>
		<div class="detail">
			<p><span class="active">优点：</span></p>
			<p ref="advantageRef">暂无内容</p>
		</div>
		<div class="detail">
			<p><span class="active">缺点：</span></p>
			<p ref="disadvantageRef">暂无内容</p>
		</div>
	</div>
</template>

<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';
import { marked } from 'marked';
import { getErrorMessage, getLLMScoreResultAPI } from '@/api/index';

const props = withDefaults(
	defineProps<{
		lessonCode: string;
	}>(),
	{
		lessonCode: ''
	}
);

watch(
	() => props.lessonCode,
	(val) => {
		if (val) {
			nextTick(() => {
				getLLMScoreResult('advantage');
				getLLMScoreResult('disadvantage');
			});
		}
	},
	{ immediate: true }
);

// 优点Ref
const advantageRef = ref<HTMLElement | null>(null);
// 缺点Ref
const disadvantageRef = ref<HTMLElement | null>(null);
// 获取AI教学优缺点
const getLLMScoreResult = async (indicatorCode: 'advantage' | 'disadvantage') => {
	try {
		const data = await getLLMScoreResultAPI({
			businessCode: props.lessonCode,
			type: indicatorCode === 'advantage' ? 5 : 6
		});

		if (data?.scoreReason) {
			nextTick(async () => {
				try {
					// 将markdown转为html结构
					const text = await marked.parse(data.scoreReason);

					if (indicatorCode === 'advantage') {
						advantageRef.value!.innerHTML = text;
					} else {
						disadvantageRef.value!.innerHTML = text;
					}
				} catch (err) {
					console.log(err);
				}
			});
		}
	} catch (err) {
		console.error(getErrorMessage(err));
	}
};
</script>

<style lang="scss" scoped>
.teaching-pros-and-cons-wrapper {
	margin-top: 1.6rem;

	.detail {
		line-height: $line-height-lg;
	}
}
</style>
